<template>
  <div class="cart-list">
    <scroll class="content" ref="scroll">
      <div v-if="cartList.length === 0">
        <h1>生气，还不带我购物</h1>
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190906%2F6644c676629c4203a227f9ff4273923e.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624338461&t=5232b2026c9b01025b23e09ca9c63ae6"
          alt=""
        />
      </div>
      <cart-list-item
        v-else
        v-for="(item, index) in cartList"
        @delItem="delItem(index)"
        :key="index"
        :item-info="item"
      ></cart-list-item>
    </scroll>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import Scroll from "components/common/scroll/Scroll";

import CartListItem from "./CartListItem";
export default {
  name: "CartList",
  components: {
    Scroll,
    CartListItem,
  },
  computed: {
    ...mapGetters(["cartList"]),
  },
  //进来时要刷新  计算高度
  activated() {
    this.$refs.scroll.refresh();
  },
  methods: {
    //删除该商品
    delItem(index) {
      this.cartList.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.cart-list {
  height: calc(100vh - 44px - 49px - 44px);
}
.content {
  height: 100%;
  overflow: hidden;
  text-align: center;
}

.content img {
  width: 100%;
}
</style>